<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<!–suppress ThymeleafVariablesResolveInspection –>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link th:href="@{~/css/font.css}"rel="stylesheet"/>
    <link th:href="@{~/css/xadmin.css}"rel="stylesheet"/>
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{~/lib/layui/layui.js}"></script>

</head>
<body class="layui-anim layui-anim-up">
    <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">会员管理</a>
            <a>
              <cite>会员列表</cite></a>
          </span>

    </div>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form layui-col-md12 x-so">
                <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
            </form>
        </div>
        <xblock>
            <a class="layui-btn" href="javascript:location.replace(location.href);"><i class="layui-icon">ဂ</i>刷新</a>
            <!--<button class="layui-btn" onclick="x_admin_show('添加用户','./member-add.html',600,400)"><i class="layui-icon"></i>添加</button>-->
            <span class="x-right" style="line-height:40px" th:text="'共有数据：'+${userList.total}+'条'"></span>
        </xblock>
        <table class="layui-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>头像</th>
                <th>用户名</th>
                <th>昵称</th>
                <th>性别</th>
                <th>生日</th>
                <th>签名</th>
                <th>学校</th>
                <th>专业</th>
                <th>班级</th>
                <th>状态</th></tr>
            </thead>
            <tbody>
            <tr th:each="user : ${userList.list}">
                <td><span th:text="${user.id}"></span></td>
                <td><img class="list_head_img" th:src="${user.headImgUrl}"/></td>
                <td><span th:text="${user.username}"></span></td>
                <td><span th:text="${user.nickname}"></span></td>
                <td><span th:text="${user.sex}"></span></td>
                <td><span th:text="${user.birthday}"></span></td>
                <td><span th:text="${user.signature}"></span></td>
                <td><span th:text="${user.college}"></span></td>
                <td><span th:text="${user.profession}"></span></td>
                <td><span th:text="${user.classes}"></span></td>
                <td class="td-status">
                    <span th:class="'layui-btn layui-btn-mini btn-ban ' + (${user.status}=='1'?'':'layui-btn-danger')"
                          th:value="${user.id}" th:text="${user.status} == '1'?'封禁':'解封'"></span>

                </td>
            </tr>

            </tbody>
        </table>
        <div id="page">
        </div>

    </div>
<script th:inline="javascript">
    layui.use('element', function(){
        var element = layui.element;
    });
    layui.use('laypage', function() {
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'page' //分页容器的id
            ,curr: [[${userList.pageNum}]]
            ,limit: [[${userList.pageSize}]] //每页12条数据
            ,count: [[${userList.total}]]
            ,skin: '#1E9FFF' //自定义选中色值
            ,skip: true //开启跳页
            ,jump: function(obj, first){
                if(!first){
                    location.href = "?page=" + obj.curr;
                }
            }
        });
    });
    layui.use('layer', function(){
        var layer = layui.layer;
        $('.btn-ban').bind("click",function () {
            var userId = parseInt($(this).attr('value'));
            var btn = $(this);
            if($(this).text() == '封禁'){
                layer.confirm('确定要封禁吗？', function (index) {
                    layer.close(index);
                    var loadFlag = layer.load(1,{shade:[0.3]});
                    $.ajax({
                        type: 'PUT',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json", //预期服务器返回的数据类型
                        url: "/user/lockUser", //url
                        data: JSON.stringify({id:userId}),
                        success: function(result){
                            layer.close(loadFlag);
                            if(result.code == 0){
                                btn.addClass('layui-btn-danger');
                                btn.text('解封');
                            }
                        },
                        error: function () {
                            layer.msg('封禁失败！');
                            layer.close(loadFlag);
                        }
                    });
                });
            }else{
                layer.confirm('确定解除封禁吗？', function (index) {
                    layer.close(index);
                    var loadFlag = layer.load(1,{shade:[0.3]});
                    $.ajax({
                        type: 'PUT',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json", //预期服务器返回的数据类型
                        url: "/user/unlockUser", //url
                        data: JSON.stringify({id:userId}),
                        success: function(result){
                            layer.close(loadFlag);
                            if(result.code == 0){
                                btn.removeClass('layui-btn-danger');
                                btn.text('封禁');
                            }
                        },
                        error: function () {
                            layer.msg('解封失败！');
                            layer.close(loadFlag);
                        }
                    });
                });
            }
        });
    });


</script>
</body>
</html>